<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        X: {{x}}  <br/>
        y: {{y}}
    </div>
    <script type="module">
        import {createApp, reactive, onMounted, onUnmounted, toRefs} from './node_modules/vue/dist/vue.esm-browser.js'

        function getMousePosition() {
            let position = reactive({
                    x: 0,
                    y: 0
                })
                const updataMousePosition = (e)=>{
                    position.x = e.pageX
                    position.y = e.pageY
                };

                onMounted(()=> {
                    
                    window.addEventListener("mousemove",updataMousePosition)
                }) 

                onUnmounted(()=> {
                    window.removeEventListener("mousemove",updataMousePosition)
                })

                return toRefs(position);
                
        }
        createApp( {
            setup() {
             let {x,y} =  getMousePosition()  
             return {
                x, y
             }
            },
        }).mount("#app");        
    </script>
</body>
</html>